<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米官网左侧菜单</title>
    <style>
      /*  */
      body,
      ul {
        margin: 0;
        padding: 0;
      }
      a {
        text-decoration: none;
        color: initial;
      }
      ul {
        list-style: none;
      }
      /*  */
      body {
        background-image: linear-gradient(to right, #fbd787, #c6ffdd);
      }
      .menu {
        width: 300px;
        /* height: 400px; */
        background-color: #f3f7e0;

        margin: 50px auto 0;
        padding: 15px 0;
      }
      .menu ul li {
        line-height: 42px;
        height: 42px;

        /* margin-left: 20px; */
        text-indent: 2em;
        /* 文字右移两字距离 */
      }
      .menu ul li a {
        /* 变成块级元素，铺满li */
        display: block;

        background: url(images/right-jiantou.png) no-repeat 255px 11px;
      }
      .menu ul li a:hover {
        background-color: #ff6700;
        color: #fff;

        background-image: url(images/right-jiantou2.png);
      }
    </style>
  </head>
  <body>
    <div class="menu">
      <ul>
        <li><a href="https://www.baidu.com" target="_blank">手机</a></li>
        <li><a href="https://www.baidu.com" target="_blank">电视</a></li>
        <li><a href="https://www.baidu.com" target="_blank">笔记本 平板</a></li>
        <li><a href="https://www.baidu.com" target="_blank">家电</a></li>
        <li><a href="https://www.baidu.com" target="_blank">出行 穿戴</a></li>
        <li><a href="https://www.baidu.com" target="_blank">智能 路由器</a></li>
        <li><a href="https://www.baidu.com" target="_blank">电源 配件</a></li>
        <li><a href="https://www.baidu.com" target="_blank">健康 儿童</a></li>
        <li><a href="https://www.baidu.com" target="_blank">耳机 音箱</a></li>
        <li><a href="https://www.baidu.com" target="_blank">生活 箱包</a></li>
      </ul>
    </div>
  </body>
</html>
